<script setup>
import { ref, reactive, toRaw } from 'vue'
import { service, cache } from '@utils'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refresh'])

defineProps({
    types: Array,
    ranges: Array,
    methods: Array
})

const visible = ref(false)
const formRef = ref()
const goodss = ref()
const isDetail = ref(false)

const state = reactive({
    param: {}
})

const rules = {
    couponName: [{ required: true, message: '请输入', trigger: 'blur' }],
    type: [{ required: true, message: '请输入', trigger: 'change' }],
    typeOfOffer: [{ required: true, message: '请输入', trigger: 'change' }],
    ranges: [{ required: true, message: '请输入', trigger: 'change' }],
    couponNum: [{ required: true, message: '请输入', trigger: 'blur' }],
    couponTime: [{ required: true, message: '请输入', trigger: 'change' }],
    couponValid: [{ required: true, message: '请输入', trigger: 'change' }],
    minPurchase: [{ required: true, message: '请输入', trigger: 'blur' }],
    couponAmount: [{ required: true, message: '请输入', trigger: 'blur' }]
}

const open = (item, isDetailValue) => {
    isDetail.value = isDetailValue
    state.param = { type: '1', ...item }
    if (item && item.type == 1) {
        state.param.couponTime = [state.param.couponStart, state.param.couponEnd]
        delete state.param.couponStart
        delete state.param.couponEnd
    }
    visible.value = true
}

const close = () => {
    visible.value = false
    state.param = {}
    isDetail.value = false
}

const getGoodsAll = async () => {
    const res = await service.bfqz.goodsAll({ state: true })
    goodss.value = res
}

const sure = async () => {
    formRef.value.validate((valid) => {
        if (valid) {
            realSubmit()
        }
    })
}
const realSubmit = async () => {
    let param = { ...toRaw(state.param) }
    if (param.type == 1 && param.couponTime) {
        param.couponStart = param.couponTime[0]
        param.couponEnd = param.couponTime[1]
        delete param.couponTime
    }

    const res = await service.bfqz.couponEdit(param)
    if (res) {
        ElMessage.success('修改成功')
        close()
        emit('refresh', !!state.param.id)
    }
}

getGoodsAll()
//把方法暴露给父组件
defineExpose({
    open
})
</script>
    
    <template>
    <el-dialog v-model="visible" :title="!!state.param.id ? '修改' : '新增'" center :close-on-click-modal="false" @close="close"
        destroy-on-close :width="750">
        <el-form :model="state.param" :rules="rules" ref="formRef" label-suffix=":" :disabled="isDetail" onsubmit="return false;">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="名称" prop="couponName" label-width="83px">
                        <el-input v-model="state.param.couponName" placeholder="请输入优惠券名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="优惠类型" prop="type">
                        <el-select v-model="state.param.type" style="width:100%" placeholder="请选择优惠类型">
                            <el-option v-for="{label, val} in types" :key="val" :label="label" :value="val" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="优惠形式" prop="typeOfOffer">
                        <el-select v-model="state.param.typeOfOffer" style="width:100%" placeholder="请选择优惠形式">
                            <el-option v-for="{label, val} in methods" :key="val" :label="label" :value="val" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <template v-if="state.param.type == 1">
                    <el-col :span="12">
                        <el-form-item label="优惠范围" prop="ranges">
                            <el-select v-model="state.param.ranges" style="width:100%" placeholder="请选择优惠范围">
                                <el-option v-for="{label, val} in ranges" :key="val" :label="label" :value="val" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="优惠券数量" prop="couponNum">
                            <el-input-number v-model="state.param.couponNum" :precision="0" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="领取时间" prop="couponTime">
                            <el-date-picker v-model="state.param.couponTime" type="daterange" range-separator="至" start-placeholder="开始时间"
                                end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="使用有效期" prop="couponValid">
                            <el-date-picker v-model="state.param.couponValid" type="date" start-placeholder="开始时间" placeholder="选择时间"
                                value-format="YYYY-MM-DD" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </template>
                <template v-else>
                    <el-col :span="12">
                        <el-form-item label="是否含尾月" prop="lastStage">
                            <el-checkbox v-model="state.param.lastStage" label="包含" />
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="12">
                    <el-form-item label="使用门槛(元)" prop="minPurchase">
                        <el-input-number v-model="state.param.minPurchase" :precision="2" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="state.param.typeOfOffer == 1">
                    <el-form-item label="优惠面额(元)" prop="couponAmount">
                        <el-input-number v-model="state.param.couponAmount" :precision="2" :min="0" :max="999" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="state.param.typeOfOffer == 2">
                    <el-form-item label="优惠折扣(%)" prop="couponAmount">
                        <el-input-number v-model="state.param.couponAmount" :precision="0" :min="0" :max="100" style="width: 100%;" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item v-if="state.param.ranges == 1" label="选择剔除商品" prop="goodsIds">
                        <el-select v-model="state.param.goodsIds" :multiple="true" style="width:100%" placeholder="请选择剔除商品" filterable
                            clearable>
                            <el-option v-for="{label, id} in goodss" :key="id" :label="label" :value="id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="state.param.ranges == 2" label="选择参加商品" prop="goodsIds">
                        <el-select v-model="state.param.goodsIds" :multiple="true" style="width:100%" placeholder="请选择参加商品" filterable
                            clearable>
                            <el-option v-for="{name, id} in goodss" :key="id" :label="name" :value="id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer v-if="!isDetail">
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    